<template>
    <div>
        欢迎！
        <button @click="handleLogin">立即登录 具有全部的权限</button>
        <button @click="justUa"> 立即登录 只能访问Ua</button>
        <button @click="justUaUb"> 立即登录 只能访问Ua和Ub 特使添加到子路由的</button>
  
    </div>
</template>

<script setup>

import { useRouter  } from 'vue-router'

        const router = useRouter();  //  router => this.$router    
        const handleLogin = ()=>{
                window.localStorage.setItem('uid',123)
                console.log('++++++++',router)
                // 动态的添加路由配置
                // 权限管理 的方式之一 可以根据用户的身份的不同
                // 动态的添加符合权限的路由
                router.addRoute({
                    path:'/ua',
                    component:()=>import('@/views/Ua.vue')
                })
                
                router.addRoute({
                    path:'/ub',
                    component:()=>import('@/views/Ub.vue')
                })

                router.addRoute({
                    path:'/ud',
                    component:()=>import('@/views/Ud.vue')
                })

                router.replace('/')  // 回到首页
        }    


        const justUa = ()=>{

                router.addRoute({
                    path:'/ua',
                    component:()=>import('@/views/Ua.vue')
                })
                
        }

        const  justUaUb = ()=>{
            router.addRoute('uc',{
                 path:'ua',
                 component:()=>import('@/views/Ua.vue')
            })
            router.addRoute('uc',{
                 path:'ub',
                 component:()=>import('@/views/Ub.vue')
            })
        }
        







</script>